import {
  Cascader,
  Checkbox,
  Input,
  message,
  Modal,
  Radio,
  Select,
  Row,
  Col,
  Button,
  Tooltip,
} from 'antd';
import { connect } from 'dva';
import React from 'react';
import enums from '../enums';
import styles from './index.less';
const { Option } = Select;
import router from 'umi/router';
@connect((state) => ({}))
export default class DetailModal extends React.PureComponent {
  state = {
    submitBtnLoading: false,
    riskEventList: [],
    riskRuleName: '',
    orgId: null,
    riskEventId: undefined,
    riskEventType: null,
    riskTriggerRuleConfig: {
      vehiclePositionConfig: {
        autoReportEnable: false,
        executeConfig: {
          // executeType: enums.riskRuleExecuteType.oneDay.value,
          executeType: undefined,
          executeTime: undefined,
          executeDay: undefined,
        },
      },
      drivingRestrictionsConfig: {
        autoDrivingRestrictionsEnable: false,
        drivingRestrictionsType: undefined,
        // enums.riskRuleDrivingRestrictionsType.limp.value,
      },
      sendWarnMsgConfig: {
        autoSendWarnMsgEnable: false,
        warnChannel: '',
        warnReceiver: '',
      },
      tboxWakeUpConfig: {
        autoWakeUpEnable: false,
      },
      iviNoticeConfig: {
        autoIviNoticeEnable: false,
        iviNoticeUuid: undefined,
      },
    },
    autoLocationAuth: false,
    lockCarAuth: false,
    limpAuth: false,
    tboxWakeupAuth: false,
    warningPersionList: [],
    riskWarningMsgUuid: null,
    iviNoticeInfoList: [],
  };

  componentDidMount() {
    const { detailModalData } = this.props;
    this.handleGetDetail(detailModalData.uuid);
    this.handleGetriskEventList();
    this.handleGetWarningPersion(detailModalData.orgId);
  }

  handleGetDetail = (uuid) => {
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: '/mscreditbusiness/rule/detail',
        uuid,
      },
      callback: (response) => {
        if (response && response.statusCode == '0') {
          if (response.data.riskTriggerRuleConfig.iviNoticeConfig == null) {
            //兼容三期及之前的老数据，
            const newData = {
              vehiclePositionConfig: response.data.riskTriggerRuleConfig.vehiclePositionConfig,
              drivingRestrictionsConfig:
                response.data.riskTriggerRuleConfig.drivingRestrictionsConfig,
              sendWarnMsgConfig: response.data.riskTriggerRuleConfig.sendWarnMsgConfig,
              tboxWakeUpConfig: response.data.riskTriggerRuleConfig.tboxWakeUpConfig,
              iviNoticeConfig: {
                autoIviNoticeEnable: false,
                iviNoticeUuid: null,
              },
            };
            this.setState({
              riskTriggerRuleConfig: newData,
            });
          } else {
            this.setState({
              riskTriggerRuleConfig: response.data.riskTriggerRuleConfig,
            });
          }
          this.setState({
            orgId: response.data.orgId,
            riskEventId: response.data.riskEventUuid,
            riskRuleName: response.data.riskRuleName,
            // riskTriggerRuleConfig: response.data.riskTriggerRuleConfig,
            riskWarningMsgUuid: response.data.riskWarnMsgUuid,
          });
          const type =
            response.data.riskTriggerRuleConfig.drivingRestrictionsConfig?.drivingRestrictionsType;
          const checkedId = response.data.riskTriggerRuleConfig.iviNoticeConfig?.iviNoticeUuid; //选中的车机告警规则
          if (typeof type == 'undefined' || type == null) {
            // 未选择跛行锁车
            // this.handleGetIviNoticeList();
            const params = {
              showTypes: [1, 2, 3],
              useType: 3,
              isEnable: 1,
            };
            this.props.dispatch({
              type: 'riskImpleRule/postObjWithRes',
              payload: {
                url: `/mscreditbusiness/iviNotice/list`,
                ...params,
              },
              callback: (response) => {
                if (response && response.statusCode == '0') {
                  // if (response.data) {
                  this.setState(
                    {
                      iviNoticeInfoList: response.data || [],
                    },
                    () => {
                      this.handleGetIviNoticeListUnabled();
                    },
                  );
                  // if (checkedId) {
                  //   //选择过规则
                  //   const arr = [];
                  //   response.data?.map((e) => {
                  //     if (e.uuid == checkedId) {
                  //       arr.push(e.uuid);
                  //     }
                  //   });
                  //   if (arr.length > 0) {
                  //     //选择规则在生效效规则中
                  //     return;
                  //   } else {
                  //     // 选择的规则可能被停用
                  //     //  console.log('123');
                  //     this.handleGetIviNoticeListUnabled();
                  //     this.setState({
                  //       iviNoticeDisabled: true,
                  //     });
                  //   }
                  // }
                  // }
                  // } else {
                  //   message.error(response.statusMessage);
                }
              },
            });
          } else {
            //跛行锁车
            // this.handleGetIviNoticeListFilter();
            // const showTypes = [2,3];
            let params = {
              showTypes: [1, 2, 3],
              useType: 1,
              isEnable: 1,
            };
            if (type === 1) {
              //锁车
              params = {
                showTypes: [1, 2, 3],
                useType: 2,
                isEnable: 1,
              };
            }
            this.props.dispatch({
              type: 'riskImpleRule/postObjWithRes',
              payload: {
                url: `/mscreditbusiness/iviNotice/list`,
                ...params,
              },
              callback: (response) => {
                if (response && response.statusCode == '0') {
                  // if (response.data) {
                  this.setState(
                    {
                      iviNoticeInfoList: response.data || [],
                    },
                    () => {
                      if (type === 1) {
                        //锁车
                        this.handleGetIviNoticeListFilterUnabled(1);
                      } else {
                        this.handleGetIviNoticeListFilterUnabled();
                      }
                    },
                  );
                  // if (checkedId) {
                  //   //选择过规则
                  //   const arr = [];
                  //   response.data?.map((e) => {
                  //     if (e.uuid == checkedId) {
                  //       arr.push(e.uuid);
                  //     }
                  //   });
                  //   if (arr.length > 0) {
                  //     //选择规则在生效效规则中
                  //     return;
                  //   } else {
                  //     // 选择的规则可能被停用
                  //     // this.handleGetIviNoticeListFilterUnabled();
                  //     if (type === 1) {
                  //       //锁车
                  //       this.handleGetIviNoticeListFilterUnabled(1);
                  //     } else {
                  //       this.handleGetIviNoticeListFilterUnabled();
                  //     }
                  //     this.setState({
                  //       iviNoticeDisabled: true,
                  //     });
                  //   }
                  // }
                  // }
                  // } else {
                  //   message.error(response.statusMessage);
                }
              },
            });
          }
        } else {
          message.error(response.statusMessage);
        }
      },
    });
  };

  handleGetWarningPersion = (orgId) => {
    this.props.dispatch({
      type: 'riskImpleRule/getDataWithRes',
      payload: {
        url: '/org/accountInfo/list',
        orgId,
      },
      callback: (response) => {
        if (response && response.statusCode == '0') {
          this.setState({
            warningPersionList: response.data || [],
          });
        } else {
          message.error(response.statusMessage);
        }
      },
    });
  };

  handleGetriskEventList = () => {
    // const { detailModalData, riskVehicle, overdueVehicle } = this.props;
    const { detailModalData, autoRiskData } = this.props;
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: '/mscreditbusiness/event/page',
        ...{
          curPage: 1,
          pageSize: 1000,
          // enable: enums.riskEventEnable.effective.value,
        },
      },
      callback: (response) => {
        if (response && response.statusCode == '0') {
          let riskEvent = response.data.rows.find(
            (item) => detailModalData.riskEventUuid == item.uuid,
          );
          // console.log('riskEvent', riskEvent);
          // if (riskEvent && riskEvent.riskEventType == enums.riskEventType.overdue.value) {
          //   this.setState({
          //     riskEventList: response.data.rows,
          //     riskEventType: riskEvent.riskEventType,
          //     autoLocationAuth: overdueVehicle.lockAuth == 1,
          //     lockCarAuth: overdueVehicle.lockAuth == 1,
          //     limpAuth: overdueVehicle.positionAuth == 1,
          //     // riskWarningMsgUuid: riskEvent.riskWarningMsgUuid,
          //   });
          // } else {
          //   this.setState({
          //     riskEventList: response.data.rows,
          //     riskEventType: riskEvent.riskEventType,
          //     autoLocationAuth: riskVehicle.lockAuth == 1,
          //     lockCarAuth: riskVehicle.lockAuth == 1,
          //     limpAuth: riskVehicle.positionAuth == 1,
          //     // riskWarningMsgUuid: riskEvent.riskWarningMsgUuid,
          //   });
          // }
          this.setState({
            riskEventList: response.data.rows,
            riskEventType: riskEvent.riskEventType,
            autoLocationAuth: autoRiskData?.realtimePositioning == 1,
            lockCarAuth: autoRiskData?.vehicleLock == 1,
            limpAuth: autoRiskData?.vehicleLimp == 1,
          });
        } else {
          message.error(response.statusMessage);
        }
      },
    });
  };
  //  // 4.8.5.1.4.	查询当前商户有效车机告警规则列表
  //  handleGetIviNoticeList = () => {
  //   const showTypes = [1,2,3];
  //   this.props.dispatch({
  //     type: "thirdOrgCreditVehicleRiskImpleRule/noticeList",
  //     payload: showTypes,
  //     callback: (response) => {
  //       if (response && response.statusCode == "0") {
  //         if (response.data && response.data.length > 0) {
  //           this.setState({
  //             iviNoticeInfoList: response.data,
  //           });
  //         }
  //       } else {
  //         message.error(response.statusMessage);
  //       }
  //     },
  //   });
  // };
  //查询当前商户停用的车机告警规则列表 --场景为其他
  handleGetIviNoticeListUnabled = () => {
    const { iviNoticeInfoList } = this.state;
    const params = {
      showTypes: [1, 2, 3],
      useType: 3,
      isEnable: 2,
    };
    // const showTypes = [1,2,3];
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: `/mscreditbusiness/iviNotice/list`,
        ...params,
      },
      callback: (response) => {
        if (response && response.statusCode == '0') {
          // if (response.data) {
          this.setState({
            iviNoticeInfoList: [...iviNoticeInfoList, ...(response.data || [])],
          });
          // }
          // } else {
          //   message.error(response.statusMessage);
        }
      },
    });
  };
  //  // 获取弹窗提醒及霸屏提醒规则
  //  handleGetIviNoticeListFilter = () => {
  //   const showTypes = [2,3];
  //   this.props.dispatch({
  //     type: "thirdOrgCreditVehicleRiskImpleRule/noticeList",
  //     payload: showTypes,
  //     callback: (response) => {
  //       if (response && response.statusCode == "0") {
  //         if (response.data && response.data.length > 0) {
  //           this.setState({
  //             iviNoticeInfoList: response.data,
  //           });
  //         }
  //       } else {
  //         message.error(response.statusMessage);
  //       }
  //     },
  //   });
  // };

  // 获取停用的弹窗提醒及霸屏提醒规则  --更改为获取停用的跛行/锁车规则
  handleGetIviNoticeListFilterUnabled = (type) => {
    const { iviNoticeInfoList } = this.state;
    let params = {
      showTypes: [1, 2, 3],
      useType: 1,
      isEnable: 2,
    };
    if (type === 1) {
      //锁车
      params = {
        showTypes: [1, 2, 3],
        useType: 2,
        isEnable: 2,
      };
    }
    // const showTypes = [2,3];
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: `/mscreditbusiness/iviNotice/list`,
        ...params,
      },
      callback: (response) => {
        if (response && response.statusCode == '0') {
          // if (response.data) {
          this.setState({
            iviNoticeInfoList: [...iviNoticeInfoList, ...(response.data || [])],
          });
          // }
          // } else {
          //   message.error(response.statusMessage);
        }
      },
    });
  };

  handleRadioClick = (e) => {
    this.setState({
      radioValue: e.target.value,
    });
  };
  toSet = () => {
    router.push({
      pathname: '/creditPlatform/deviceWarningRules',
    });
  };
  render() {
    const {
      riskEventList,
      riskEventType,
      riskTriggerRuleConfig,
      riskRuleName,
      riskEventId,
      orgId,
      autoLocationAuth,
      lockCarAuth,
      limpAuth,
      warningPersionList,
      riskWarningMsgUuid,
      iviNoticeInfoList,
    } = this.state;
    // console.log("riskWarningMsgUuid", riskWarningMsgUuid);

    const { changeDetailModalVisible, orgOptions, autoRiskData } = this.props;

    return (
      <Modal
        title="风控实施规则详情"
        onCancel={() => changeDetailModalVisible(false)}
        visible={true}
        footer={[]}
      >
        <div className={styles.addModal}>
          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请输入风控规则名称:</div>
            <div className={styles.itemContent}>
              <Input
                disabled
                value={riskRuleName}
                placeholder={'请输入风控规则名称'}
                onChange={(e) => {
                  this.setState({
                    riskRuleName: e.target.value,
                  });
                }}
              />
            </div>
          </div>
          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请选择风控对象:</div>
            <div className={styles.itemContent}>
              {/* <Cascader
                disabled
                changeOnSelect
                options={orgOptions}
                displayRender={(label) => {
                  return label[label.length - 1];
                }}
                allowClear={false}
                expandTrigger="hover"
                value={orgId}
                placeholder="请选择风控对象"
                onChange={(e) => {
                  const newConfig = { ...riskTriggerRuleConfig };
                  newConfig.sendWarnMsgConfig.warnReceiver = '';
                  this.setState({
                    orgId: e,
                    riskTriggerRuleConfig: newConfig,
                  });
                  this.handleGetWarningPersion(e[e.length - 1]);
                }}
              /> */}
              <Select
                disabled
                placeholder="请选择风控对象"
                value={orgId}
                allowClear={false}
                onChange={(e) => {
                  const newConfig = { ...riskTriggerRuleConfig };
                  newConfig.sendWarnMsgConfig.warnReceiver = '';
                  this.setState({
                    orgId: e,
                    riskTriggerRuleConfig: newConfig,
                  });
                  this.handleGetWarningPersion(e);
                }}
              >
                {orgOptions.map((org) => {
                  return (
                    <Option key={org.sid} value={org.sid}>
                      {org.orgName}
                    </Option>
                  );
                })}
              </Select>
            </div>
          </div>
          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请选择风控触发事件:</div>
            <div className={styles.itemContent}>
              <Select
                disabled
                value={riskEventId}
                placeholder="请选择风控触发事件"
                onChange={(e) => {
                  // const { riskVehicle, overdueVehicle, autoRiskData } = this.props;
                  const newConfig = { ...riskTriggerRuleConfig };
                  newConfig.tboxWakeUpConfig.autoWakeUpEnable = false;
                  newConfig.vehiclePositionConfig.autoReportEnable = false;
                  newConfig.drivingRestrictionsConfig.autoDrivingRestrictionsEnable = false;
                  newConfig.drivingRestrictionsConfig.drivingRestrictionsType = undefined;
                  let findE = riskEventList.find((item) => item.uuid === e);
                  this.setState({
                    riskEventId: findE.uuid,
                    riskEventType: findE.riskEventType,
                    autoLocationAuth: autoRiskData?.realtimePositioning == 1,
                    lockCarAuth: autoRiskData?.vehicleLock == 1,
                    limpAuth: autoRiskData?.vehicleLimp == 1,
                    tboxWakeupAuth: autoRiskData?.remoteWakeup == 1,
                    riskTriggerRuleConfig: newConfig,
                    riskWarningMsgUuid: findE.riskWarningMsgUuid,
                  });
                }}
              >
                {riskEventList.map((e) => {
                  return (
                    <Option key={e.uuid} value={e.uuid}>
                      {e.riskEventContent}
                    </Option>
                  );
                })}
              </Select>
            </div>
          </div>

          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请选择风控实施规则:</div>
            <div className={styles.itemContentRule}>
              {autoRiskData?.remoteWakeup && riskEventType == enums.riskEventType.loss.value ? (
                <div className={styles.checkboxTboxWakeUp}>
                  <div className={styles.checkboxTitle}>
                    <Checkbox
                      disabled
                      onChange={(e) => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.tboxWakeUpConfig.autoWakeUpEnable = e.target.checked;
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                      checked={riskTriggerRuleConfig.tboxWakeUpConfig.autoWakeUpEnable}
                    ></Checkbox>
                    <div className={styles.titleValue}>自动对TBOX进行远程唤醒</div>
                  </div>
                </div>
              ) : null}

              <div
                style={{
                  display:
                    autoLocationAuth &&
                    riskEventType != null &&
                    riskEventType !== enums.riskEventType.loss.value
                      ? ''
                      : 'none',
                }}
                className={styles.checkboxAutoPositionCar}
              >
                <div className={styles.checkboxTitle}>
                  <Checkbox
                    disabled
                    onChange={(e) => {
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.vehiclePositionConfig.autoReportEnable = e.target.checked;
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                    checked={riskTriggerRuleConfig.vehiclePositionConfig.autoReportEnable}
                  ></Checkbox>
                  <div className={styles.titleValue}>自动对车辆进行实时定位</div>
                </div>
                <div className={styles.positionTime}>
                  <div className={styles.positionTimeTitle}>请选择定位时间</div>
                  <div className={styles.positionTimeValue}>
                    <Radio.Group
                      disabled
                      value={riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeType}
                      onChange={(e) => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.vehiclePositionConfig.executeConfig.executeType = e.target.value;
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                    >
                      <div className={styles.positionTimeValueItem}>
                        <div className={styles.radioItem}>
                          <Radio disabled value={enums.riskRuleExecuteType.oneDay.value}>
                            每天一次
                          </Radio>
                        </div>
                        <div className={styles.selectItem}>
                          <Select
                            disabled
                            placeholder="请选择时间"
                            value={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeTime
                            }
                            onChange={(e) => {
                              const newConfig = { ...riskTriggerRuleConfig };
                              newConfig.vehiclePositionConfig.executeConfig.executeTime = e;
                              this.setState({
                                riskTriggerRuleConfig: newConfig,
                              });
                            }}
                          >
                            {Array.from({ length: 24 }).map((item, index) => {
                              let value = '';
                              if (index < 10) {
                                value = `0${index}:30`;
                              } else {
                                value = `${index}:30`;
                              }
                              return (
                                <Option key={value} value={value}>
                                  {value}
                                </Option>
                              );
                            })}
                          </Select>
                        </div>
                      </div>
                      <div className={styles.positionTimeValueItem}>
                        <div className={styles.radioItem}>
                          <Radio disabled value={enums.riskRuleExecuteType.oneWeek.value}>
                            每周一次
                          </Radio>
                        </div>
                        <div className={styles.selectItem}>
                          <Select
                            disabled
                            placeholder="请选择日期"
                            disabled={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig
                                .executeType !== enums.riskRuleExecuteType.oneWeek.value
                            }
                            value={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeDay
                            }
                            onChange={(e) => {
                              const newConfig = { ...riskTriggerRuleConfig };
                              newConfig.vehiclePositionConfig.executeConfig.executeDay = e;
                              this.setState({
                                riskTriggerRuleConfig: newConfig,
                              });
                            }}
                          >
                            <Option value={1}>周一</Option>
                            <Option value={2}>周二</Option>
                            <Option value={3}>周三</Option>
                            <Option value={4}>周四</Option>
                            <Option value={5}>周五</Option>
                            <Option value={6}>周六</Option>
                            <Option value={0}>周日</Option>
                          </Select>
                        </div>
                        <div className={styles.selectItem}>
                          <Select
                            disabled
                            placeholder="请选择时间"
                            disabled={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig
                                .executeType !== enums.riskRuleExecuteType.oneWeek.value
                            }
                            value={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeTime
                            }
                            onChange={(e) => {
                              const newConfig = { ...riskTriggerRuleConfig };
                              newConfig.vehiclePositionConfig.executeConfig.executeTime = e;
                              this.setState({
                                riskTriggerRuleConfig: newConfig,
                              });
                            }}
                          >
                            {Array.from({ length: 24 }).map((item, index) => {
                              let value = '';
                              if (index < 10) {
                                value = `0${index}:30`;
                              } else {
                                value = `${index}:30`;
                              }
                              return (
                                <Option key={value} value={value}>
                                  {value}
                                </Option>
                              );
                            })}
                          </Select>
                        </div>
                      </div>
                    </Radio.Group>
                  </div>
                </div>
              </div>
              <div
                style={{
                  display:
                    (lockCarAuth || limpAuth) &&
                    riskEventType != null &&
                    riskEventType !== enums.riskEventType.loss.value
                      ? ''
                      : 'none',
                }}
                className={styles.checkboxAutoControlCar}
              >
                <div className={styles.checkboxTitle}>
                  <Checkbox
                    disabled
                    onChange={(e) => {
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.drivingRestrictionsConfig.autoDrivingRestrictionsEnable =
                        e.target.checked;
                      if (e.target.checked) {
                        newConfig.iviNoticeConfig.autoIviNoticeEnable = e.target.checked;
                      }
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                    checked={
                      riskTriggerRuleConfig.drivingRestrictionsConfig.autoDrivingRestrictionsEnable
                    }
                  ></Checkbox>
                  <div className={styles.titleValue}>自动对车辆实施行驶限制</div>
                </div>
                <div className={styles.checkboxValue}>
                  <Radio.Group
                    disabled
                    value={riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType}
                    onChange={(e) => {
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.drivingRestrictionsConfig.drivingRestrictionsType = e.target.value;
                      if (e.target.checked) {
                        newConfig.iviNoticeConfig.autoIviNoticeEnable = true;
                      }
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                  >
                    {limpAuth ? (
                      <Radio disabled value={enums.riskRuleDrivingRestrictionsType.limp.value}>
                        跛行
                      </Radio>
                    ) : null}
                    {lockCarAuth ? (
                      <Radio disabled value={enums.riskRuleDrivingRestrictionsType.locak.value}>
                        锁车
                      </Radio>
                    ) : null}
                  </Radio.Group>
                </div>
              </div>
              <div
                className={styles.checkboxSendInfo}
                style={{ display: riskWarningMsgUuid ? '' : 'none' }}
              >
                <div className={styles.checkboxTitle}>
                  <Checkbox
                    disabled
                    onChange={(e) => {
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.sendWarnMsgConfig.autoSendWarnMsgEnable = e.target.checked;
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                    checked={riskTriggerRuleConfig.sendWarnMsgConfig.autoSendWarnMsgEnable}
                  ></Checkbox>
                  <div className={styles.titleValue}>自动给管理人员发送预警信息</div>
                </div>
                <div className={styles.sendPerson}>
                  <div className={styles.sendPersonTitle}>请选择要告警的人员</div>
                  <div className={styles.sendPersonValue}>
                    <Select
                      disabled
                      showArrow
                      placeholder="请选择告警人员"
                      value={
                        riskTriggerRuleConfig.sendWarnMsgConfig.warnReceiver
                          ? riskTriggerRuleConfig.sendWarnMsgConfig.warnReceiver.split(',')
                          : []
                      }
                      mode="multiple"
                      // maxTagCount={2}
                      onChange={(e) => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.sendWarnMsgConfig.warnReceiver = e.toString();
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                    >
                      {warningPersionList.map((persion) => {
                        return (
                          <Option key={persion.opUser} value={persion.opUser}>
                            {persion.opUser}
                          </Option>
                        );
                      })}
                    </Select>
                  </div>
                </div>
                <div className={styles.sendWay}>
                  <div className={styles.sendWayTitle}>请选择告警方式</div>
                  <div className={styles.sendWayValue}>
                    <Checkbox.Group
                      disabled
                      onChange={(e) => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.sendWarnMsgConfig.warnChannel = e.toString();
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                      value={
                        riskTriggerRuleConfig.sendWarnMsgConfig.warnChannel
                          ? riskTriggerRuleConfig.sendWarnMsgConfig.warnChannel.split(',')
                          : []
                      }
                    >
                      {enums.riskRuleWarnChannel.array.map((item) => {
                        return (
                          <Checkbox disabled key={item.value} value={item.value}>
                            {item.label}
                          </Checkbox>
                        );
                      })}
                    </Checkbox.Group>
                  </div>
                </div>
              </div>
              {autoRiskData.vehicleAlarm == 1 && (
                <div className={styles.checkboxTboxWakeUp}>
                  <div className={styles.checkboxTitle}>
                    <Checkbox
                      disabled
                      onChange={(e) => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.iviNoticeConfig.autoIviNoticeEnable = e.target.checked;
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                      checked={
                        riskTriggerRuleConfig.iviNoticeConfig?.autoIviNoticeEnable ||
                        riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType ==
                          1 ||
                        riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType == 0
                      }
                      // disabled={(typeof(riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType) == 'undefined' ||  riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType == null) ? false : true}
                    ></Checkbox>
                    <div style={{ marginLeft: 3 }}>自动给车机发送告警信息</div>
                  </div>
                  <div className={styles.sendPerson}>
                    <div className={styles.sendPersonTitle}>请选择车机告警规则：</div>
                    <div className={styles.sendPersonValue}>
                      <Select
                        disabled
                        style={{ width: 250 }}
                        showArrow
                        placeholder="请选择车机告警规则"
                        value={
                          riskTriggerRuleConfig.iviNoticeConfig?.iviNoticeUuid
                            ? riskTriggerRuleConfig.iviNoticeConfig.iviNoticeUuid
                            : ''
                        }
                        onChange={(e) => {
                          const newConfig = { ...riskTriggerRuleConfig };
                          newConfig.iviNoticeConfig.iviNoticeUuid = e;
                          this.setState({
                            riskTriggerRuleConfig: newConfig,
                          });
                        }}
                      >
                        {iviNoticeInfoList.map((d) => {
                          return (
                            <Option key={d.uuid} value={d.uuid}>
                              {d.name}
                            </Option>
                          );
                        })}
                      </Select>
                      <Button type="link" onClick={this.toSet}>
                        <u>去新建规则</u>
                      </Button>
                    </div>
                  </div>
                  <div style={{ color: 'red', marginTop: 10, fontSize: 'small' }}>
                    <Row>
                      <Col span={3}>
                        <span>注意：</span>
                      </Col>
                      <Col span={21}>
                        <span>1. 若车辆已实施跛行或锁车，则必须发送车机告警</span>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={3}>
                        <span></span>
                      </Col>
                      <Col span={21}>
                        <span>2. 若车辆已实施跛行或锁车，则车机告警规则不能使用弱提醒</span>
                      </Col>
                    </Row>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}
